import React from 'react'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import ErrorBoundary from '../../components/ErrorBoundary'
import styles from './index.module.css'

const Help = () => {
  const navigate = useNavigate()

  const helpItems = [
    { title: '如何挂号？', icon: '🏥' },
    { title: '如何缴费？', icon: '💳' },
    { title: '如何查看报告？', icon: '📋' },
    { title: '如何绑定就诊卡？', icon: '🆔' },
    { title: '如何管理家庭成员？', icon: '👨‍👩‍👧‍👦' },
  ]

  return (
    <div className={styles.helpPage}>
      <ErrorBoundary>
        <TopNavbar
          title="帮助中心"
          showBack={true}
          onBack={() => navigate(-1)}
        />
      </ErrorBoundary>
      
      <div className={styles.content}>
        <div className={styles.helpList}>
          {helpItems.map((item, index) => (
            <div key={index} className={styles.helpItem}>
              <div className={styles.helpIcon}>{item.icon}</div>
              <div className={styles.helpTitle}>{item.title}</div>
              <div className={styles.helpArrow}>›</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default Help
